<div class="register-bg-section skin-bgc"></div>
<div class="register-content">
  <div class="register-content-title">注册</div>
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="username">用户名</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="username" id="username" />
        <nz-form-explain *ngIf="validateForm.get('username')?.dirty && validateForm.get('username')?.errors">
          请输入用户名
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>密码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input type="password" id="password" formControlName="password"
          (ngModelChange)="updateConfirmValidator()" />
        <nz-form-explain *ngIf="validateForm.get('password')?.dirty && validateForm.get('password')?.errors">
          请输入密码</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="rePassword" nzRequired>密码确认</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input type="password" formControlName="rePassword" id="rePassword" />
        <nz-form-explain *ngIf="validateForm.get('rePassword')?.dirty && validateForm.get('rePassword')?.errors">
          <ng-container *ngIf="validateForm.get('rePassword')?.hasError('required')">
            请输入密码
          </ng-container>
          <ng-container *ngIf="validateForm.get('rePassword')?.hasError('confirm')">
            两次输入的密码不一致
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phone" nzRequired>手机号</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.controls['phoneNumber']">
        <input nz-input formControlName="phone" id="phone" />
        <nz-form-explain *ngIf="validateForm.get('phone')?.dirty && validateForm.get('phoneNumber')?.errors">
            <ng-container *ngIf="validateForm.get('phone')?.hasError('required')">
              请输入手机号
            </ng-container>
            <ng-container *ngIf="validateForm.get('phone')?.hasError('phoneNumber')">
              请输入11位数字格式的手机号码
            </ng-container>
          </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nz-row style="margin-bottom:8px;">
      <nz-form-control [nzSpan]="14" [nzOffset]="6">
        <label nz-checkbox formControlName="agree">
          <span>我已阅读并同意<a>《用户协议》 </a></span>
        </label>
        <a style="float: right" routerLink="/login">已有账号?</a>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nz-row style="margin-bottom:8px;">
      <nz-form-control [nzSpan]="14" [nzOffset]="6">
        <button nz-button nzType="primary">注册</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>